<template>
  <div class="home public">
    <div class="home-noticebar">
      {{ tips }}
    </div>
    <div class="home-banner">
      <div class="home-banner-bg"><img src="@/assets/img/index_bg.png" alt="" /></div>
      <div class="home-banner-animate">
        <div class="home-banner-animate-text1line"></div>
        <img class="home-banner-animate-line" src="@/assets/img/img_0.png" alt="" />
        <img class="home-banner-animate-text1" src="@/assets/img/img_2.png" alt="" />
        <img class="home-banner-animate-text2" src="@/assets/img/img_3.png" alt="" />
        <img class="home-banner-animate-text3" src="@/assets/img/img_1.png" alt="" />
        <img class="home-banner-animate-face" src="@/assets/img/img_4.png" alt="" />
        <img class="home-banner-animate-qr" src="@/assets/img/img_5.png" alt="" />
      </div>
      <div class="home-banner-number">
        本月已有
        <span class="home-banner-number-person">{{ person }}</span>
        人获取自己面相详情
      </div>
      <div class="home-banner-btn" @click="isFaceDetail = true">立即获取面部详情</div>
    </div>
    <div class="home-footer">
      <p class="home-footer-tips">获取报告或解锁全部内容时，需付费查看</p>
    </div>
    <el-dialog title="麻衣神相说明" class="home-detail" width="8.5rem" center :visible.sync="isFaceDetail">
      <div class="home-detail-content">
        麻衣神相将面相学基本概念结合面部识别技术，形成新的，由人工智能看面相的方式。 面不独论，麻衣神相由
        <span class="home-detail-content-num">5</span> 位国内资深相学大师整理的面相学基本概念，和<span class="home-detail-content-num">10</span
        >位人工智能工程师运用深度神经网络学习语言让 <span class="home-detail-content-num">AI</span>学习近<span class="home-detail-content-num">20</span
        >万拥有<span class="home-detail-content-num">180</span>个定位点的真实人脸样本数据，<span class="home-detail-content-num">AI</span>
        测算最精准的数据，匹配面相学大师倾囊相守的相学经验，我们尽最大可能真实还原《面相学》这一中国传统文化的精髓，希望可以展示其中的规律之美。
      </div>
      <el-button class="home-detail-btn" @click="goNextPage">下一步</el-button>
      <!-- <div class="home-detail-agreement"></div> -->
    </el-dialog>
  </div>
</template>
<script >
export default {
  data() {
    return {
      tips: '我平台所有测试仅供娱乐，不得作为生活、工作之指导。我平台产品拒绝向未成年人提供服务，如未成年人使用切造成一切后果由其监护人自行承担。本网页数据安全由阿里云提供，严格按照法律法规和用户协议对您的信息进行全方位的保护，请放心使用！',
      person: 2197249,
      isFaceDetail: false
    };
  },
  methods: {
    goNextPage() {
      this.$router.push('/uploadImg');
    }
  }
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog {
  background-color: #1b1b2c !important;
  margin-top: 17vh !important;
}
::v-deep .el-dialog__title {
  line-height: 0.3rem;
  font-size: 0.45rem;
  color: #fff;
  font-weight: 600;
}
::v-deep .el-dialog__header {
  padding: 0 !important;
}
@keyframes marqueeAnim {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes moveUpDown {
  0% {
    transform: translateY(1800%); /* 初始位置，不移动 */
  }
  50% {
    transform: translateY(-400%); /* 向上移动20px */
  }
  100% {
    transform: translateY(1800%); /* 回到初始位置 */
  }
}
@mixin positionSty($width, $position, $top, $left, $right, $bottom, $transform) {
  width: $width;
  position: $position;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
  transform: $transform;
}
.home {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 1rem;

  &-noticebar {
    padding: 0 0.32rem;
    line-height: 0.68rem;
    overflow: hidden;
    background: #191919;
    opacity: 0.7;
    font-size: 0.346667rem;
    color: #fff;
    word-break: keep-all;
    white-space: nowrap;
    -webkit-animation: marqueeAnim 22s linear 0s infinite;
    animation: marqueeAnim 22s linear 0s infinite;
  }
  &-banner {
    position: relative;
    width: 100%;
    padding-bottom: 20%;
    &-bg {
      width: 100%;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    &-animate {
      position: absolute;
      z-index: 1;
      top: 32%;
      width: 100%;
      height: 50%;
      transform: scale(1.1);
      &-text1 {
        @include positionSty(13%, absolute, 20%, initial, 15%, initial, translateX(0));
      }
      &-text1line {
        // border: 1px dashed red;
        @include positionSty(8%, absolute, 14%, initial, 24%, initial, translateX(0));
      }
      &-text2 {
        @include positionSty(13%, absolute, 30%, 13%, initial, initial, translateX(0));
      }
      &-text3 {
        @include positionSty(13%, absolute, initial, initial, 15%, 22%, translateX(0));
      }
      &-line {
        @include positionSty(85%, absolute, 21%, 7%, initial, initial, translateX(0));
        animation: moveUpDown 4s infinite;
      }
      &-face {
        @include positionSty(37%, absolute, 4%, 52%, initial, initial, translateX(-50%));
      }
      &-qr {
        @include positionSty(70%, absolute, 5%, 50%, initial, initial, translateX(-50%));
      }
    }
    &-number {
      position: absolute;
      bottom: 15%;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      font-size: 0.373333rem;
      color: #fff;
      text-align: center;
      &-person {
        font-size: 0.373333rem;
        color: #f8ea0b;
      }
    }
    &-btn {
      z-index: 3;
      @include positionSty(80%, absolute, initial, 10%, initial, initial, translateX(-50%));
      height: 1.333333rem;
      background: #1ffbbb;
      border-radius: 0.693333rem;
      font-size: 0.5rem;
      font-family: SourceHanSansSC-Bold, SourceHanSansSC;
      font-weight: 700;
      color: #151522;
      line-height: 1.333333rem;
      text-align: center;
      cursor: pointer;
      animation: tada;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
  }
  &-footer {
    color: rgb(105, 138, 135);
    border-bottom: 0.013333rem solid rgb(61, 61, 78);
    width: 100%;
    &-tips {
      font-size: 0.293333rem;
      font-weight: 400;
      line-height: 0.426667rem;
      margin-top: 0.093333rem;
      text-align: center;
    }
  }
  &-detail {
    &-content {
      font-size: 0.373333rem;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: #c5c9d1;
      line-height: 0.85rem;
      text-align: left;
      margin-bottom: 0.173333rem;
      &-num {
        color: #1ffbbb;
      }
    }
    &-btn {
      height: 1.28rem;
      background: #1ffbbb;
      border-radius: 0.693333rem;
      font-size: 0.48rem;
      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
      font-weight: 500;
      color: #333;
      line-height: 1.28rem;
      margin: 0.5rem auto;
      margin-top: 0.66666 !important;
    }
    ::v-deep .el-button {
      line-height: 0.28rem !important;
      width: 100% !important;
    }
    &-agreement {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.546667rem;
    }
  }
}
</style>